<template>
    <div class="editwhite">
         <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">牙齿美白度</span>
        <span slot="more"></span>
        </LoginHeader>
        <div class="initwhite">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_1.png" alt="" v-if="picindex==0">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_2.png" alt="" v-else-if="picindex==1">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_3.png" alt="" v-else-if="picindex==2">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_4.png" alt="" v-else-if="picindex==3">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_5.png" alt="" v-else-if="picindex==4">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_6.png" alt="" v-else-if="picindex==5">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_7.png" alt="" v-else-if="picindex==6">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_8.png" alt="" v-else-if="picindex==7">
            <!-- <img :src="'@/assets/njrpic/usercenterpic/teeth/pic_tooth_'+(picindex+1)+'.png'" alt=""> -->
        </div>
        <!-- <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_color_8.png" alt=""> -->
        <div class="circle">
        <img :src="item.circlepic" :class="picindex==index?'active':''" alt="" v-for="(item,index) in changepic" :key="index" @click="choose(index)">
    </div>
    <br>
        <el-button v-show="whitepost" @click="ifteeth">确定</el-button>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            changepic:[
                {pic:'',circlepic:''},
                {pic:'',circlepic:''},
                {pic:'',circlepic:''},
                {pic:'',circlepic:''},
                {pic:'',circlepic:''},
                {pic:'',circlepic:''},
                {pic:'',circlepic:''},
                {pic:'',circlepic:''},
            ],
            // changepic:[],
            picindex:1,
            whitepost:false
        }
    },
    mounted(){
        // this.$http.get('/api/pic').then(({
        //     data,config
        // })=>{
        //     if(data.code==200){
        //         console.log(data.data);
        //         this.changepic=data.data
        //     }else{
        //         console.log('图片查找出错');
        //     }
        // })
        this.$http.get('/api/users/'+this.$store.state.username)
        .then(({
            data,config
        })=>{
            if(data.code==200){
                console.log(data.data.whiteteeth);
                this.picindex=data.data.whiteteeth
            }else{
                this.$message.error('牙齿美白度信息获取失败')
            }
        })
    },
 components:{
        LoginHeader
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        choose(index){
            this.picindex=index
            this.whitepost=true
        },
         ifteeth(){
            this.$http.put('/api/users/'+this.$store.state.id,{whiteteeth:this.picindex})
            .then(({
                data,config
            })=>{
                if(data.code==200){
                    console.log(data);
                    this.$message.success('修改信息成功')
                    this.$router.push('/usercenter/userinfo')
                }else{
                    this.$message.error('修改蛀牙失败')
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
.editwhite{
    text-align: center;
.initwhite{
    margin-top: 50px;
    background-image: url('../../../../assets/njrpic/usercenterpic/teeth/pic_tooth.png');
    background-size:100%;
    background-repeat:no-repeat;
        text-align: center;
    img{
        width: 100%;
    }
}
.circle{
    text-align: center;
>img{
    width: 7%;
    margin: 15px;
}
.active{
    transform: scale(1.5);
}
}
.el-button{
        width: 50%;
        border-radius: 30px;
        background-color: #7f50d5;
        padding: 15px 0;
        color: white;
        margin-top: 50px;
    }
}
</style>